﻿<!DOCTYPE html>
<html class="L_UI">
<head>
    <link href="/CSS/Main.css" rel="stylesheet" />
</head>
<body>
    <div id="app" style="width: 100%;">
        <div style="margin: 0 auto; font-size: 14px; color: #B0B0B0; text-align: center;">
            <button type="button" style="width: 8px; height: 14px; margin: 0; padding: 0; border: 0; outline: none; background-image: url('/Content/Images/左箭头.png'); color: white; background-color: white; margin-right: 5px; cursor: pointer; "
                    @click="GoLeft"></button>
            <div style="display: inline-block; font-size: 14px; color: white; margin-left: 5px; ">
                <button v-if="PageCount==1||PageCount==0" type="button" style="border: 0; background-color: rgb(255, 87, 34); margin: 3px; padding: 3px 10px; color: white;"
                        @click="Go(1)">
                    1
                </button>
                <template v-if="PageCount>1" v-for=" item in Data">
                    <button v-if="item==CurrentPage" type="button" style="border: 0; background-color: rgb(255, 87, 34); margin: 3px; padding: 3px 10px; color: white; "
                            @click="Go(item.Index)">
                        {{item.Index}}
                    </button>
                    <button v-if="item!=CurrentPage" type="button" style="border: 0; margin: 3px; padding: 3px 10px; " @click="Go(item.Index)">{{item.Index}}</button>
                </template>
            </div>
            <button type="button" style="width: 8px; height: 14px; margin: 0; padding: 0; border: 0; outline: none; background-image: url('/Content/Images/右箭头.png'); color: white; background-color: white; margin-left: 5px; cursor: pointer;"
                    @click="GoRight "></button> 到第
            <input type="text" v-model="ToCurrentPage" style="width:30px;background-color: white; border: 0; border: 1px solid #B0B0B0; text-align: center; margin: 3px; padding: 3px 10px;" />页
            <button @click="Go(ToCurrentPage)" type="button" style="color: #000; background-color: white; border: 1px solid #B0B0B0; text-align: center; margin: 3px; padding: 3px 10px; ">确定</button>共
            <span>{{RowCount}}</span>条,{{PageCount}}页
            <select style="border: 1px solid #B0B0B0;" v-model="RowsPerPage">
                <template v-for="item in PerArry">
                    <option :value="item">{{item}}条/页</option>
                </template>
            </select>
            <button type="button" class="bt_css_s" @click="Go(1)">首页</button>
            <button type="button" class="bt_css_s" @click="GoLeft">上一页</button>
            <button type="button" class="bt_css_s" @click="GoRight">上一页</button>
        </div>
    </div>
    <script src="/Content/lib/vue/vue-2.5.17.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                PageCount: 0,
                Data: [],
                CurrentPage: 1,
                ToCurrentPage: 1,
                RowCount: 1,
                RowsPerPage: 50,
                PerArry: [50, 100, 200, 400, 800, 1600]
            },
            methods: {
                Go: function (page) {

                },
                GoLeft: function () {

                },
                GoRight: function () {

                }
            },
            mounted: function () {

            }
        });
    </script>
</body>
</html>